<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>html2canvas example</title>
    <script type="text/javascript" src="./html2canvas example_files/html2canvas.js"></script>
    <script type="text/javascript" src="./html2canvas example_files/jsPdf.debug.js"></script>
    <script src="https://code.jquery.com/jquery-git.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
        background-color: white;
      }
    </style>
  </head>
  <body>
    <button id="renderPdf">下载PDF</button>
    <h1>22222</h1>
    <h1>33333</h1>
    <script type="text/javascript">
      var downPdf = document.getElementById("renderPdf");
      downPdf.onclick = function() {
          html2canvas(document.body, {
              onrendered:function(canvas) {
                  //返回图片URL，参数：图片格式和清晰度(0-1)
                  var pageData = canvas.toDataURL('image/jpeg', 1.0);
                  //方向默认竖直，尺寸ponits，格式a4【595.28,841.89]
                  var pdf = new jsPDF('', 'pt', 'a4');
                  //需要dataUrl格式
                  pdf.addImage(pageData, 'JPEG', 0, 0, 800, 800/canvas.width * canvas.height );
                  pdf.save('content.pdf');

              }
          })
      }
    </script>
  
</body></html>